<template>
  <table-tool 
    ref="TableToolRef"
    :httpInfo="httpInfo"
    :pageName="pageName"
    :tableConfig="tableConfig"
    :btnConfig="btnConfig"
    :dialogInfo="dialogInfo"
    :rules="rules"
    @setDialogMod="setDialogMod"
  >
    <!-- 搜索框 -->
    <template #searchSlot>
      <el-form ref="searchForm" :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item prop="name" label="计算名">
          <el-input size="small" v-model="searchInfo.name" placeholder="请输入计算名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="resetSearch">
            <el-icon class="icon"><elementRefresh/></el-icon> 
            <span class="icon-font">刷新</span>
          </el-button>
          <el-button size="small" type="primary" @click="onSearch">
            <el-icon class="icon"><elementSearch/></el-icon> 
            <span class="icon-font">搜索</span>
          </el-button>
          <el-button size="small" type="success" @click="dialogTableVisible = true">
            <span class="icon-font">开始计算</span>
          </el-button>
        </el-form-item>
        <el-dialog v-model="dialogTableVisible" title="选择计算名" width="30%">
          <el-select size="small" v-model="comsetid" filterable  placeholder="请选择计算名">
            <el-option
              v-for="item in aComSetList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogTableVisible = false">取消</el-button>
              <el-button type="primary" @click="startCom">确认</el-button>
            </span>
          </template>
        </el-dialog>
      </el-form>
    </template>

    <!-- 添加修改框 -->
    <template #dialogSlot>
      <el-form-item label="计算名" prop="name">
        <el-input size="small" v-model="dialogInfo.name" placeholder="请填写计算名" autocomplete="off" clearable></el-input>
      </el-form-item>
      <el-form-item label="考核项" prop="itid">
        <el-select size="small" v-model="dialogInfo.itid" filterable  placeholder="请选择考核项">
					<el-option
						v-for="item in aitemList"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					>
					</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权重(请输入0和1之间的小数)" prop="weight">
        <el-input size="small" type="number" min="0" v-model="dialogInfo.weight" placeholder="请填写权重" autocomplete="off" clearable></el-input>
      </el-form-item>
    </template>
  </table-tool>
</template>

<script>
import { reactive, ref,toRefs,watch } from 'vue';
import TableTool from '/@/components/table/index.vue'
import service from '/@/utils/request';
import { ElMessage } from 'element-plus';
export default {
  components:{
    TableTool,
  },
  setup () {
		let assList =  ref([])
		let aitemList =  ref([])
		let aComSetList =  ref([])
    // ===================== axios ===============
    // const getAssData = async () => { // 获取角色数据
    //   let dataInfo = await service.get('admin/asetting/getList') // 获取数据
		// 	if (dataInfo.code === 200) { assList.value = dataInfo.data.data } 
		// 	else {ElMessage.error('获取考核列表信息失败')}
    // }
    const getAitemData = async () => { // 获取角色数据
      let dataInfo = await service.get('admin/aitem/getList') // 获取数据
			if (dataInfo.code === 200) { aitemList.value = dataInfo.data.data } 
			else {ElMessage.error('获取考核项列表信息失败')}
    }
    const getAComSetData = async () => { // 获取角色数据
      let dataInfo = await service.get('admin/acomset/getDistList') // 获取数据
			if (dataInfo.code === 200) { aComSetList.value = dataInfo.data.data } 
			else {ElMessage.error('获取设置信息失败')}
    }
    const startCompute = async (params) => { // 开始计算
      let dataInfo = await service.post('admin/acomset/start',params) // 获取数据
			if (dataInfo.code === 200) { 
        aitemList.value = dataInfo.data.data
        ElMessage.success(dataInfo.msg)
      } 
			else {ElMessage.error('计算失败')}
    }
		getAComSetData()
    getAitemData()

    const pageName = '计算'

    const searchInfo =  reactive({
      name:'',
    })
    const state = reactive({
      dialogTableVisible: false,
      comsetid:'',
      comName:'',
      comAId:'',
    })
    const initInfo = {
      id:'',
      name:'',
      aid:'',
      aname:'',
      itid:'',
      itname:'',
      weight:''
    }

    let rules = ref({
      name: [{ required: true, message: '请输入计算名', trigger: 'blur' }],
      aid: [{ required: true, message: '请选择考核', trigger: 'blur' }],
      itid: [{ required: true, message: '请选择考核项', trigger: 'blur' }],
      weight: [{ required: true, message: '请设置权重', trigger: 'blur' }]
    })
    const tableConfig = reactive({ // 表格配置
      stripe: true,
      maxHeight: null,
      hasSelectionRole: true,
      button:['edit','del']
    })
    const btnConfig = reactive({
      showAddBtn: true,
      showdeleteBtn: true,
      showImportBtn: false,
      showExportBtn: false,
      fileType: 'noop', // 下载文件模板类型
      acceptType: '.xls,.xlsx', // 文件类型
      action: '/admin/upload/noop', // 文件上传地址
      limits: 1, // 上传数量限制
    })
    const httpInfo = reactive({
      listUrl: '/admin/acomset/getList',
      deleteUrl: '/admin/acomset/remove',
      saveUrl: '/admin/acomset/save',
      updateUrl: '/admin/acomset/update',
    })

    const TableToolRef = ref()
    const searchForm = ref()
    let dialogInfo = reactive(initInfo)

    // watch(() => dialogInfo.aid, (newVal) => { // 监控属性
		// 	assList.value.forEach(item => {
		// 		if(item.id == newVal){
		// 			dialogInfo.aname = item.name
		// 		}	
		// 	})
    // })
    watch(() => dialogInfo.itid, (newVal) => { // 监控属性
			aitemList.value.forEach(item => {
				if(item.id == newVal){
					dialogInfo.itname = item.name
          dialogInfo.aid = item.sid
          dialogInfo.aname = item.sname
				}	
			})
    })

    watch(() => state.comsetid, (newVal) => { // 监控属性
			aComSetList.value.forEach(item => {
				if(item.id == newVal){
          state.comAId = item.aid
          state.comName = item.name
				}	
			})
    })

    

    const onSearch = () => { // 搜索
      TableToolRef.value.searchBtn(searchInfo)
    }

    const resetSearch = () => { // 刷新
      searchForm.value.resetFields()
			TableToolRef.value.searchBtn(searchInfo)
    }

    const setDialogMod = (nowInfo) =>{
      if (nowInfo == {}) {
        dialogInfo = initInfo
      }else{
        for (const [key, val] of Object.entries(nowInfo)) { 
          dialogInfo[key] = val
        }
      }
    }
    const startCom = () =>{
      let data = new FormData()
      data.append("id", state.comAId)
      data.append("name", state.comName)
      startCompute(data)
      state.dialogTableVisible=false
    }


    return{
      dialogInfo,
      rules,
      httpInfo,
      pageName,
      searchInfo,
      TableToolRef,
      searchForm,
      tableConfig,
      btnConfig,
			assList,
			aitemList,
      aComSetList,
      setDialogMod,
      resetSearch,
      onSearch,
      startCom,
      startCompute,
      ...toRefs(state),
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item{
  vertical-align: top;
}
</style>